<template>
  <view class="content" v-if="!state.loading">
    <!-- 订单详情 -->
    <view class="info fz30 bg-white bdr20">
      <view class="fff item flex flex-x-between flex-y-center mb20" :class="orderStatus[state.dataSource.orderStatus] ? orderStatus[state.dataSource.orderStatus][1] : ''">
        <view>{{ orderStatus[state.dataSource.orderStatus] ? orderStatus[state.dataSource.orderStatus][0] : '' }}</view>
        <!-- <view>17分钟</view> -->
      </view>
      <view class="item flex flex-x-between">
        <view>寄存网点</view>
        <view>{{ state.dataSource.networkName }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view>网点地址</view>
        <view>{{ state.dataSource.netWorkDetailAddress }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view>寄存柜子</view>
        <view>{{ state.dataSource.otherName }}（{{ cellTypeOptions[state.dataSource.cellType] }}）</view>
      </view>
      <view class="item flex flex-x-between">
        <view>订单编号</view>
        <view>{{ state.dataSource.orderId }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view class="blue">存包手机</view>
        <view class="red">{{ state.dataSource.storageMobile }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view class="blue">存包密码</view>
        <view class="red">{{ state.dataSource.storagePwd }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view>订单费用</view>
        <view>{{ state.dataSource.orderAmount / 100 }}元</view>
      </view>
      <view class="item flex flex-x-between">
        <view>实付金额</view>
        <view class="main-theme-color">{{ state.dataSource.actualAmount / 100 }}元</view>
      </view>
      <view class="item flex flex-x-between">
        <view>使用时长</view>
        <view>{{ $filter.timeDifference(state.dataSource.usedTime) }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view>开始时间</view>
        <view>{{ state.dataSource.createTime }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view>结束时间</view>
        <view>{{ state.dataSource.endTime }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view>计费模式</view>
        <view>{{ billingMethod[state.dataSource.chargeType] }}</view>
      </view>
      <view class="item flex flex-x-between">
        <view class="name">计费标准</view>
        <view class="flex1">{{ state.dataSource.billingStandards }}</view>
      </view>
    </view>

    <view class="info fz30 bg-white bdr20">
      <view class="item flex flex-x-between"><view class="fz32">开门记录</view></view>
      <view class="item flex flex-x-between" v-for="item in state.dataSource.openHistory" :key="item.id">
        <view>{{ item.createTime }}</view>
        <view :class="openType[item.openType][1]">{{ openType[item.openType][0] }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { queryOrderbyId } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();

const state = reactive({
  loading: true,
  dataSource: {}
});

const billingMethod = {
  0: '免费',
  1: '按次计费',
  2: '按时计费'
};

const orderStatus = {
  0: ['未支付', 'bg-green'],
  1: ['进行中', 'bg-green'],
  2: ['已支付', 'bg-blue'],
  3: ['已取消', 'bg-gray9'],
  4: ['退款中', 'bg-red'],
  5: ['已退款', 'bg-red'],
  6: ['已完成', 'bg-blue'],
  7: ['已超时', 'bg-red']
};

const openType = {
  0: ['订单开始', 'blue'],
  1: ['中途开门', 'gray9'],
  2: ['订单结束', 'gray3']
};

const cellTypeOptions = {
  0: '小柜',
  1: '中柜',
  2: '大柜',
  3: '超大柜'
};

// 页面加载完成
onLoad(async option => {
  await proxy.$onLaunched;
  loadData(option.orderId);
});

// 获取数据
const loadData = orderId => {
  const data = {
    orderId
  };
  queryOrderbyId(data)
    .then(res => {
      state.dataSource = res.result;
    })
    .finally(() => {
      state.loading = false;
    });
};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.content {
  padding-bottom: 2rpx;
}

.info {
  padding: 0 0 40rpx;
  line-height: 50rpx;
  margin: 20rpx;

  .item {
    padding: 20rpx;

    .name {
      width: 200rpx;
    }
  }
}
</style>
